import React, { Component } from 'react'
import {Text, View, StyleSheet, Platform, Image, TouchableOpacity} from 'react-native';
import { connect } from 'react-redux'
const NAV_BAR_HEIGHT_IOS = 44;
const NAV_BAR_HEIGHT_ANDROID = 50;

 class PhoneHeader extends Component {
  getRightButton(title) {
    if(title == 'Read') {
      return (
        <TouchableOpacity
          style={styles.operation}
          onPress={() => this.props.navigation.navigate('Search')}
        >
          <Image source={require('../src/images/ic_search_white_48pt.png')} style={{width: 20 ,height: 20}}/>
        </TouchableOpacity>
      )
    }
  }

  render() {
    const route = this.props.navigation.state.routes;
    const index = this.props.navigation.state.index;
    let title = route[index].routeName
    return (
      <View style={[styles.container, {backgroundColor: this.props.themeColor}]}>
        <Text style={styles.navBar}>{title}</Text>
        {
          this.getRightButton(title)
        }
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    height: Platform.OS === 'ios' ? NAV_BAR_HEIGHT_IOS : NAV_BAR_HEIGHT_ANDROID,
  },
  navBar: {
    color: '#fff',
    fontSize: 14
  },
  operation: {
    position: 'absolute',
    right: 20
  }
})

const mapState = (state) => ({
  themeColor: state.theme.themeColor
})

export default connect(mapState, null)(PhoneHeader)

